<template>
  <div>
    <div class="head-container">
      <el-row>
        <el-col :span="24">
          <div class="head-item-container">
            当前报表： <b>{{ reporttitle }}</b></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple"><span class="demonstration">报表类型:</span></div></el-col>
            <el-col :span="6">
              <span class="demonstration">产线:</span></el-col>
            <el-col :span="6">
              <span class="demonstration">渠道:</span></el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-select
                ref="datetype"
                v-model="datetype"
                name="datetype"
                placeholder="请选择报表类型"
                @change="conditionChange"
              >
                <el-option
                  v-for="item in datetypes"
                  :key="item.code"
                  :label="item.title"
                  :value="item.code"
                />
              </el-select></el-col>
            <el-col :span="6"><el-select
              ref="producttype"
              v-model="producttype"
              name="producttype"
              placeholder="请选择品类"
              @change="conditionChange"
            >
              <el-option
                v-for="item in producttypes"
                :key="item.code"
                :label="item.title"
                :value="item.code"
              />
            </el-select></el-col>
            <el-col :span="6">
              <el-select
                ref="channel"
                v-model="channel"
                name="channel"
                placeholder="请选择渠道"
                @change="conditionChange"
              >
                <el-option
                  v-for="item in channels"
                  :key="item.code"
                  :label="item.title"
                  :value="item.code"
                />
              </el-select></el-col>
          </el-row>

        </el-col>

        <el-col :span="12">
          <el-row>
            <el-col :span="6"><span class="demonstration">日期范围:</span></el-col>
          </el-row><el-row>
            <el-col :span="6"><el-date-picker
              v-model="datevalue"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions2"
              @change="conditionChange"
            /></el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-divider />
    </div>
    <div class="chart-container"><chart
      ref="childChart"
      height="100%"
      width="100%"
      :option="option"
    /></div>
    <div class="chart-container">
      <el-table
        ref="table1"
        key="tablekey"
        :data="tabledata"
        style="width: 100%"
      >
        <el-table-column
          prop="product"
          label="产品"
          width="180"
        />
        <el-table-column
          prop="Matcha"
          label="抹茶"
          width="180"
        />
        <el-table-column
          prop="Milk"
          label="牛奶"
        />
        <el-table-column
          prop="Cheese"
          label="芝士"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import Chart from '@/components/Charts/DyDataset'
import { getDatasetByType, getDatasetSeries } from '@/api/chart'

export default {
  name: 'DyDatasetChart',
  components: { Chart },
  data() {
    return {
      dataset: {
        source: []
      },
      series: [],
      reporttitle: '活跃用户报表',
      datetype: 'd',
      datetypes: [
        { code: 'y', title: '年报' },
        { code: 'q', title: '季报' },
        { code: 'm', title: '月报' },
        { code: 'w', title: '周报' },
        { code: 'd', title: '日报' }
      ],
      producttype: '1',
      producttypes: [
        { code: '1', title: '手机' },
        { code: '2', title: '电脑' },
        { code: '3', title: '汽车' },
        { code: '4', title: '媒体' }
      ],
      channel: 'a',
      channels: [
        { code: 'a', title: '渠道A' },
        { code: 'b', title: '渠道B' }
      ],
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      datevalue: null,
      tablekey: '',
      tabledata: null
    }
  },
  computed: {
    condition: {
      get: function() {
        return {
          datetype: this.datetype,
          producttype: this.producttype,
          channel: this.channel
          // tableData: this.tableData
        }
      }
    },
    option: {
      // getter
      get: function() {
        return {
          legend: {},
          tooltip: {},
          dataset: this.dataset,
          xAxis: { type: 'category' },
          yAxis: {},
          series: this.series
        }
      },
      // setter
      set: function(newValue) {
        // this.$refs.childChart.option = this.option
      }
    }},
  created() {
    this.getData(this.condition.datetype, this.condition.producttype, this.condition.channel, '', '')
    // this.$refs.childChart.initChart()
  },
  methods: {
    conditionChange() {
      if (this.datevalue !== null) {
        this.getData(this.condition.datetype, this.condition.producttype, this.condition.channel, this.datevalue[0], this.datevalue[1])
      } else {
        this.getData(this.condition.datetype, this.condition.producttype, this.condition.channel, '', '')
      }
    },
    getData(datatype, producttype, channel, from, to) {
      getDatasetByType(datatype, producttype, channel, from, to).then(response => {
        this.dataset = response.data
        console.log('chart dataset:' + this.dataset.source)
      })

      getDatasetSeries().then(response => {
        this.series = response.data
        console.log('chart series:' + this.series)
      })
      // this.$refs.childChart.initChart()
      setTimeout(() => {
        this.tabledata = this.ArrToObjArr(this.dataset.source)
        this.tablekey = Math.random()
      }, 100)
    },
    ArrToObjArr(source) {
      const keys = source
      const keysObj = Object.assign({}, keys[0])
      console.log('数组到对象：' + keysObj)
      const propertyKeyNames = Object.values(keysObj)
      let i = 0
      for (i = 0; i <= propertyKeyNames.length - 1; i++) {
        console.log('对象到key数组[' + i + ']：' + propertyKeyNames[i])
      }

      const newArr = source.slice(1, source.length)
      let j = 0
      const objArr = []
      let objRow = {}
      for (j = 0; j <= newArr.length - 1; j++) {
        objRow = {}
        for (i = 0; i <= propertyKeyNames.length - 1; i++) {
          objRow = Object.assign(objRow, JSON.parse('{"' + propertyKeyNames[i] + '":"' + newArr[j][i] + '"}'))
        }
        objArr.push(objRow)
      }
      console.log(objArr)
      return objArr
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.chart-container{
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
.head-container {
  position: relative;

  .head-item-container {
    padding: 20px 5px 20px 0px;
    position: relative;
    @include clearfix;
    margin-bottom: 0px;
  }
}
</style>
